<template>
  <div class="banner-wrap" :style="{height: `${bHeight}px`}" @mouseenter="onStop" @mouseleave="onGo">
    <transition-group tag="ul" name="bannerlist">
      <li v-for="(list, index) in lists" :key="list.id" v-show="index === currentIndex" @click="clearSearchParams">
        <p class="desc" v-text="list.subTitle" v-if="list.subTitle"></p>
        <a v-lazy:background-image="list.image || list.img" @click="onToNewTab(list.type, list.value)"></a>
      </li>
    </transition-group>
    <p class="dots" v-if="lists.length > 1">
      <span v-for="(item, index) in lists" 
        :key="index" 
        :class="{actived: index === currentIndex}" 
        @mouseover="onChange(index)">
      </span>
    </p>
  </div>
</template>

<script>
export default {
  props: {
    lists: {
      type: Array,
      default() {
        return [
          {
            link: '#',
            image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501588650083&di=5506527b23e1dba8883843ec9209d79d&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01893455fecd8f32f875a1320acdca.jpg%40900w_1l_2o_100sh.jpg'
          }
        ]
      }
    },
    themes: {
      type: [Number, String],
      default: 1
    },
    height: {
      type: Number,
      default: 420
    },
    duration: {
      type: Number,
      default: 3000
    }
  },
  data() {
    return {
      currentIndex: 0,
      timer: '',
      btnShow: false,
      bHeight: this.height,
      dotTimer: null
    }
  },
  created() {
    this.$nextTick(() => {
      this.timer = setInterval(() => {
        this.autoPlay()
      }, this.duration)
    })
  },
  methods: {
    /**
     * 鼠标移除banner区域内，则继续当前banner轮播
     */
    onGo() {
      this.timer = setInterval(() => {
        this.autoPlay()
      }, this.duration)
      this.btnShow = false
    },
    /**
     * 鼠标移至banner内，则停止轮播
     */
    onStop() {
      clearInterval(this.timer)
      this.timer = null
      this.btnShow = true
    },
    /**
     * 鼠标移动至dot，则展示相应的banner
     */
    onChange(index) {
      clearTimeout(this.dotTimer)
      this.dotTimer = setTimeout(() => {
        this.currentIndex = index
      }, 300)
    },
    /**
     * 自动轮播banner
     */
    autoPlay() {
      this.currentIndex++
      if (this.currentIndex > this.lists.length - 1) {
        this.currentIndex = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.banner-wrap {
  position: relative;
  overflow: hidden;
  background-color: transition;
  ul {
    width: 100%;
    height: 100%;
    li {
      position: absolute;
      width: 100%;
      height: 100%;
      .titleName{
        position: relative;
        z-index: 2;
        width: 100%;
        // height: 24px;
        color: #404040;
        font-size: 22px;
        text-align: center;
        margin: 20px 0 5px 0;
      }
      .desc{
        position: absolute;
        bottom: 10px;
        z-index: 2;
        width: 100%;
        // height: 24px;
        color: #404040;
        font-size: 14px;
        text-align: center;
        margin: 20px 0 5px 0;

      }
      a {
        display: block;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 100%;
        cursor: pointer;
      }
      img {
        margin: 0 auto;
        width: auto;
        height: 100%;
      }
    }
  }
  .dots {
    position: absolute;
    z-index: 4;
    bottom: 50px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0;
    span {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin: 0 8px;
      background: #000;
      border: 1px solid #535353;
      border-radius: 7px;
      cursor: pointer;
      &.actived {
        background: #fff;
        border-color: #fff;
      }
    }
  }
}
.bannerlist-enter-active {
  transition: all .3s ease;
  transform: translateX(0)
}
.bannerlist-leave-active {
  transition: all .3s ease;
  transform: translateX(-100%)
}
.bannerlist-enter {
  transform: translateX(100%)
}
.bannerlist-leave {
  transform: translateX(0)
}
</style>